<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			 body {
           		background: url(img/1.jpg) no-repeat;
        		}
			#content {
				height: 165px;
	            padding-top: 35px;
	            text-align: center;
	            background: rgba(255,255,255,0.3);
			}					
			img {
				width: 150px;
				height: 100px;
				margin: 20px 5px;
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<div id="content">
			<img src="img/1.jpg" />
			<img src="img/2.jpg" />
			<img src="img/3.jpg" />
			<img src="img/4.jpg" />
			<img src="img/5.jpg" />
		</div>
		
		<script>
			var imgs = document.getElementsByTagName("img");
			var body = document.body;
			for(i=0;i<imgs.length;i++){
				imgs[i].onclick = function(){
					body.style.backgroundImage = "url(" + this.src + ")";
				}
			}
		</script>
	</body>

</html>